<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>美食数据分析可视化</title>

	<!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

	<!-- Styles -->
    <link href="/static/assets/css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/owl.carousel.min.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/owl.theme.default.min.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/weather-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/simdahs.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">


</head>

<body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <div class="nano-content">
                    <style>
                        .newUl li {
                            font-size: 19px;
                        }
                    </style>

                </div>
                <ul class="newUl">
					<li class="label">主页</li>
                    <li class="active"><a href="/foodApp/index/"><i class="ti-home"></i> 首页 </a></li>


                    <li><a href="/foodApp/selfInfo/"><i class="ti-user"></i> 个人信息</a></li>



					<li class="label">数据分析</li>
					<li><a href="/foodApp/table/"><i class="ti-layout"></i> 数据总览</a>

                    </li>
					<li><a href="/foodApp/typeChart/"><i class="ti-panel"></i> 类型分析</a>

                    </li>


					<li><a href="/foodApp/priceChart/"><i class="ti-money"></i> 价格分析</a>
                    </li>

					<li><a href="/foodApp/rateChart/"><i class="ti-comment"></i> 评价分析</a>

                    </li>
{#                    <li><a href="/foodApp/areaChart/"><i class="ti-map"></i> 地区分析</a>#}
{##}
{#                    </li>#}
                    <li><a href="/foodApp/foodCloud/"><i class="ti-cloud"></i> 美食词云图</a>

                    </li>

					<li class="label">预测</li>
					<li class="" ><a href="/foodApp/preChart/"><i class="ti-view-list-alt"></i> 评价预测  </a></li>



                </ul>
            </div>
        </div>
    </div><!-- /# sidebar -->

    <div class="header">
        <div class="pull-left">
            <div class="logo" id="sideLogo">
                <a href="index.html">
{#                    <img class="full-logo" src="/static/assets/images/logo-big.png" alt="SimDahs">#}
{#                    <img class="small-logo" src="/static/assets/images/logo-small.png" alt="SimDahs">#}
                    <span>美食数据分析可视化</span>
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>

        <div class="pull-right p-r-15">
            <ul>
                <li class="header-icon dib"><i class="ti-bell"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Recent Notifications</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Mr. Wolf</div>
                                            <div class="notification-text">5 members joined today </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sofiya</div>
                                            <div class="notification-text">likes a photo of you</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Richard</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-icon dib"><i class="ti-email"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">2 New Messages</span>
                            <a href="email.html"><i class="ti-pencil-alt pull-right"></i></a>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/1.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
				<li class="header-icon dib chat-sidebar-icon"><i class="ti-comment"></i></li>
                <li class="header-icon dib"><img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt="" /> <span class="user-avatar">Wolf <i class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-heading">
                            <span class="text-left">{{ userInfo.username }}</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li><a href="/foodApp/selfInfo/"><i class="ti-user"></i> <span>个人信息</span></a></li>
                                <li><a href="/foodApp/login/"><i class="ti-power-off"></i> <span>退出登录</span></a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

	<div class="chat-sidebar">
        <!-- BEGIN chat -->
        <div id="mmc-chat" class="color-default">
            <!-- BEGIN CHAT BOX -->
            <div class="chat-box">
                <!-- BEGIN CHAT BOXS -->
                <ul class="boxs"></ul>
                <!-- END CHAT BOXS -->
                <div class="icons-set">
                    <div class="stickers">
                        <div class="had-container">
                            <div class="row">
                                <div class="s12">
                                    <ul class="tabs" style="width: 100%;height: 60px;">
                                        <li class="tab col s3">
                                            <a href="#tab1" class="active">
                                                <img src="images/1.png" alt="" />
                                            </a>
                                        </li>
                                        <li class="tab col s3"><a href="#tab2">Test 2</a></li>
                                    </ul>
                                </div>
                                <div id="tab1" class="s12 tab-content">
                                    <ul>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                    </ul>
                                </div>
                                <div id="tab2" class="s12 tab-content">Test 2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CHAT BOX -->
            <!-- BEGIN SIDEBAR -->
            <div id="sidebar" class="right scroll">
                <div class="had-container">
                    <!-- BEGIN USERS -->
                    <div class="users">

                        <ul class="user-list">
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="1" data-status="online" data-username="Rufat Askerov" data-position="left" data-filter-item data-filter-name="rufat askerov">
                                <!-- BEGIN USER IMAGE-->
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Rufat Askerov" />
                                </div>
                                <!-- END USER IMAGE-->
                                <!-- BEGIN USERNAME-->
                                <span class="user-name">Rufat Askerov</span>
								<span class="user-show"></span>
                                <!-- END USERNAME-->
                            </li>
                            <!-- END USER-->
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="3" data-status="online" data-username="Alice" data-position="left" data-filter-item data-filter-name="alice">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Alice" />
                                </div>
                                <span class="user-name">Alice</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Michael Scofield" data-position="left" data-filter-item data-filter-name="michael scofield">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Michael Scofield" />
                                </div>
                                <span class="user-name">Michael Scofield</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="5" data-status="online" data-username="Irina Shayk" data-position="left" data-filter-item data-filter-name="irina shayk">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Irina Shayk" />
                                </div>
                                <span class="user-name">Irina Shayk</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="6" data-status="offline" data-username="Sara Tancredi" data-position="left" data-filter-item data-filter-name="sara tancredi">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Sara Tancredi" />
                                </div>
                                <span class="user-name">Sara Tancredi</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Wolf" data-position="left" data-filter-item data-filter-name="Wolf">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Wolf" />
                                </div>
                                <span class="user-name">Wolf</span>
								<span class="user-show"></span>
                            </li>
                        </ul>
						<div class="chat-user-search">
							<div class="input-group">
								<span class="input-group-addon"><i class="ti-search"></i></span>
								<input type="text" class="form-control" placeholder="Search"  data-search />
							</div>
						</div>
                    </div>
                    <!-- END USERS -->

                </div>
            </div>
            <!-- END SIDEBAR -->
        </div>
        <!-- END chat -->
    </div>
    <!-- END chat Sidebar-->

    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <h1>首页</h1>
                            </div>
                        </div>
                    </div><!-- /# column -->
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="#">主页</a></li>
                                    <li class="active">首页</li>
                                </ol>
                            </div>
                        </div>
                    </div><!-- /# column -->
                </div><!-- /# row -->
                <div class="main-content">
					<div class="row">
						<div class="col-lg-9">
							<div class="card alert">
								<div class="card-header">
									<h4>Top10餐厅价格评分分析</h4>
									<div class="card-header-right-icon">
										<ul>
											<li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
										</ul>
									</div>
								</div>
								<div class="sales-chart">
{#									<canvas id="team-chart" height="136"></canvas>#}
                                    <div id="mainA" style="width: 100%;height: 370px"></div>
								</div>
							</div>
						</div><!-- /# column -->
                        <div class="col-lg-3">
                            <div class="card alert nestable-cart single-card">
                                <div class="card-header">
                                    <h4>最高价格</h4>
                                </div>
                                <div class="sparkline-box">
                                    <span id="sparklinedash"><canvas width="67" height="30" style="display: inline-block; width: 67px; height: 30px; vertical-align: top;"></canvas></span>
                                </div>
                                <div class="visit-count">
                                    {{ max_value | safe }}
                                </div>
                            </div>

                            <div class="card alert nestable-cart single-card">
                                <div class="card-header">
                                    <h4>最多评论</h4>
                                </div>
                                <div class="sparkline-box">
                                    <span id="sparklinedash3"><canvas width="67" height="30" style="display: inline-block; width: 67px; height: 30px; vertical-align: top;"></canvas></span>
                                </div>
                                <div class="visit-count">
                                    {{ max_comment | safe }}
                                </div>
                            </div>
                            <div class="card alert nestable-cart single-card">
                                <div class="card-header">
                                    <h4>最贵餐厅</h4>
                                </div>
                                <div class="sparkline-box">
                                    <span id="sparklinedash2"><canvas width="67" height="30" style="display: inline-block; width: 67px; height: 900px; vertical-align: top;"></canvas></span>
                                </div>
                                <div class="visit-count">
                                    {{ max_name | safe }}
                                </div>
                            </div>

                           <div class="card alert nestable-cart single-card">
                                <div class="card-header">
                                    <h4>最多类型</h4>
                                </div>
                                <div class="sparkline-box">
                                    <span id="sparklinedash4"><canvas width="70" height="30" style="display: inline-block; width: 70px; height: 900px; vertical-align: top;"></canvas></span>
                                </div>
                                <div class="visit-count">
                                    {{ most_name | safe }}
                                </div>
                            </div>
                        </div>
                    </div><!-- /# row -->
                    </div>

					<div class="row">
						<div class="col-lg-5">
                            <div class="card alert">
                                <div class="card-header">
                                    <h4>总体类型分析</h4>
                                </div>
                                <div class="card-body">
                                    <div id="mainB" style="width: 100%;height: 360px"></div>
                                </div>
                            </div>
                        </div><!-- /# column -->
						<div class="col-lg-6">
                           <div class="card alert">
                                <div class="card-header">
                                    <h4>城市均价分析</h4>
                                </div>
                                <div class="card-body">
                                    <div id="mainC" style="width: 100%;height: 360px"></div>
                                </div>
                            </div>
                        </div><!-- /# column -->
					</div><!-- /# row -->
                </div>

            </div><!-- /# container-fluid -->
        </div><!-- /# main -->
    </div><!-- /# content wrap -->


    <script src="/static/assets/js/lib/jquery.min.js"></script><!-- jquery vendor -->
    <script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->
    <script src="/static/assets/js/lib/sidebar.js"></script><!-- sidebar -->
    <script src="/static/assets/js/lib/bootstrap.min.js" rel="stylesheet"></script><!-- bootstrap -->
    <script src="/static/assets/js/lib/mmc-common.js"></script>
    <script src="/static/assets/js/lib/mmc-chat.js"></script>
	<!--  Chart js -->
	<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
	<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
	<!-- // Chart js -->


    <script src="/static/assets/js/lib/sparklinechart/jquery.sparkline.min.js"></script><!-- scripit init-->
    <script src="/static/assets/js/lib/sparklinechart/sparkline.init.js"></script><!-- scripit init-->

	<!--  Datamap -->
    <script src="/static/assets/js/lib/datamap/d3.min.js"></script>
    <script src="/static/assets/js/lib/datamap/topojson.js"></script>
    <script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
    <script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
	<!-- // Datamap -->-->
    <script src="/static/assets/js/lib/weather/jquery.simpleWeather.min.js"></script>
    <script src="/static/assets/js/lib/weather/weather-init.js"></script>
    <script src="/static/assets/js/lib/owl-carousel/owl.carousel.min.js"></script>
    <script src="/static/assets/js/lib/owl-carousel/owl.carousel-init.js"></script>
    <script src="/static/assets/js/scripts.js"></script><!-- scripit init-->
    <script src="/static/assets/js/echarts.js"></script>
    <script>
        var chartDom = document.getElementById('mainA');
        var myChart = echarts.init(chartDom);
        var option;
        var xBarData = {{ xBarData | safe }};
        var y1BarData = {{ y1BarData | safe }};
        var y2BarData = {{ y2BarData | safe }};
        option = {
            legend:{
                data:['价格','评分星级'],
                itemStyle:{
                    color: '#FFD56E'
                }
            },
            dataZoom:[
                {
                    type:'inside',
                    start:0,
                    end:90
                }
            ],
    backgroundColor: '#fff',
    grid: {
        top: '15%',
        right: '10%',
        left: '10%',
        bottom: '12%'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        type: 'category',
        color: '#59588D',
        data:  xBarData,
        axisLabel: {
            margin: 20,
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        axisLabel: {
            formatter: '{value}',
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
            }
        }
    },
        {
        axisLabel: {
            formatter: '{value}',
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
            }
        }
    }
    ],
    series: [{
        name: '价格',
        type: 'bar',
        data:  y2BarData,
        barWidth: '50px',
        itemStyle: {
            normal: {
                color: function(params){//展示正值的柱子，负数设为透明
                    let colorArr = params.value > 0?['#FF9A22', '#FFD56E']:['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: colorArr[0] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color:  colorArr[1]// 100% 处的颜色
                    }], false)
                },
                barBorderRadius: [30,30,0,0]
            },
        },
        label: {
            normal: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333',
                position: 'top',
            }
        }
    },
    {#    {#}
    {#    type: 'bar',#}
    {#    data: [40, 80, 20, -16],#}
    {#    barWidth: '50px',#}
    {#    barGap: '-100%',#}
    {#    itemStyle: {#}
    {#        normal: {#}
    {#            color: function(params){//展示负值的柱子，正数设为透明#}
    {#                let colorArr = params.value > 0?['rgba(0,0,0,0)', 'rgba(0,0,0,0)']:['#FFD56E', '#FF9A22']#}
    {#                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{#}
    {#                    offset: 0,#}
    {#                    color: colorArr[0] // 0% 处的颜色#}
    {#                }, {#}
    {#                    offset: 1,#}
    {#                    color:  colorArr[1]// 100% 处的颜色#}
    {#                }], false)#}
    {#            },#}
    {#            barBorderRadius: [0,0,30,30]#}
    {#        },#}
    {#    }#}
    {#},#}
        {
        name: '评分星级',
            data: y1BarData,
            yAxisIndex: 1,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
            color: '#3275FB',
            width: 4,
            shadowColor: 'rgba(0, 0, 0, 0.3)',//设置折线阴影
            shadowBlur: 15,
            shadowOffsetY: 20,
        }
    }
]
};

        option && myChart.setOption(option);
function changeData(x){
    var st = x[0]
    for(var i=0;i<x.length-1;i++){
     x[i] = x[i+1]
    }
    x[x.length - 1] = st
}

function circleOne(){
            var chartDom = document.getElementById('mainA');
        var myChart = echarts.init(chartDom);
        var option;
        {#var xBarData = {{ xBarData | safe }};#}
        {#var y1BarData = {{ y1BarData | safe }};#}
        {#var y2BarData = {{ y2BarData | safe }};#}
        this.changeData(xBarData)
        this.changeData(y1BarData)
        this.changeData(y2BarData)
        option = {
            legend:{
                data:['价格','评分星级'],
                itemStyle:{
                    color: '#FFD56E'
                }
            },
    backgroundColor: '#fff',
    grid: {
        top: '15%',
        right: '10%',
        left: '10%',
        bottom: '12%'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        type: 'category',
        color: '#59588D',
        data:  xBarData,
        axisLabel: {
            margin: 20,
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        axisLabel: {
            formatter: '{value}',
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
            }
        }
    },
        {
        axisLabel: {
            formatter: '{value}',
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
            }
        }
    }
    ],
    series: [{
        name: '价格',
        type: 'bar',
        data:  y2BarData,
        barWidth: '50px',
        itemStyle: {
            normal: {
                color: function(params){//展示正值的柱子，负数设为透明
                    let colorArr = params.value > 0?['#FF9A22', '#FFD56E']:['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: colorArr[0] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color:  colorArr[1]// 100% 处的颜色
                    }], false)
                },
                barBorderRadius: [30,30,0,0]
            },
        },
        label: {
            normal: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333',
                position: 'top',
            }
        }
    },
    {#    {#}
    {#    type: 'bar',#}
    {#    data: [40, 80, 20, -16],#}
    {#    barWidth: '50px',#}
    {#    barGap: '-100%',#}
    {#    itemStyle: {#}
    {#        normal: {#}
    {#            color: function(params){//展示负值的柱子，正数设为透明#}
    {#                let colorArr = params.value > 0?['rgba(0,0,0,0)', 'rgba(0,0,0,0)']:['#FFD56E', '#FF9A22']#}
    {#                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{#}
    {#                    offset: 0,#}
    {#                    color: colorArr[0] // 0% 处的颜色#}
    {#                }, {#}
    {#                    offset: 1,#}
    {#                    color:  colorArr[1]// 100% 处的颜色#}
    {#                }], false)#}
    {#            },#}
    {#            barBorderRadius: [0,0,30,30]#}
    {#        },#}
    {#    }#}
    {#},#}
        {
        name: '评分星级',
            data: y1BarData,
            yAxisIndex: 1,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
            color: '#3275FB',
            width: 4,
            shadowColor: 'rgba(0, 0, 0, 0.3)',//设置折线阴影
            shadowBlur: 15,
            shadowOffsetY: 20,
        }
    }
]
};

        option && myChart.setOption(option);
}
setInterval(circleOne,2000)

    </script>
<script>
    var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    {#text: 'Referer of a Website',#}
    {#subtext: 'Fake Data',#}
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: {{ pieData | safe }},
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;

option = {
            title: {
                {#text: '漏斗图'#}
                },
            tooltip: {
                trigger: 'item',//数据项图形触发
                    //{a}: 系列名称，就是 series 中的 name
                    //{b}: 类目值， 就是 x 轴的分类名
                    //{c}: 数值， 当前分类对应的数值
                    //<br/>换行
                formatter: '{a} <br/>{b} : {c}￥'//回调函数
                },
            toolbox: {//工具栏
                feature: {
                    dataView: { //数据视图工具
                        readOnly: false //不可编辑（只读）
                    },
                    restore: {},//配置项还原
                    saveAsImage: {},//保存图片
                    }
                },
            legend: {//图例
                type:'scroll',//可滚动的图例
                left:'5%',//图例组件离容器左侧的距离：靠左
                orient:'vertical',//图例列表的布局朝向：垂直
                top:'center',//图例组件离容器左侧的距离：居中
                data: ['展示', '点击', '访问', '咨询', '订单']
            },
            series: [{
                name: '漏斗图',
                type: 'funnel',//类型：漏斗图
                left: '10%',//漏斗图组件离容器左侧的距离
                top:50,//漏斗图组件离容器上侧的距离
                bottom: 60,//漏斗图组件离容器下侧的距离
                width: '80%',//漏斗图组件的宽度
                min: 0,//指定的数据最小值
                max: 100,//指定的数据最大值
                minSize: '0%',//数据最小值 min 映射的宽度
                maxSize: '100%',//数据最大值 max 映射的宽度
                sort: 'descending',////漏斗数据降序排列
                gap: 2,//数据图形间距
                label: {//漏斗图图形上的文本标签
                    show: true,//显示文本标签
                    position: 'inside'//标签的位置：漏斗图梯形内部
                },
                labelLine: {//标签的视觉引导线样式
                    length: 10,//视觉引导线的长度
                    lineStyle: {//线的样式
                        width: 1,//宽度
                        type: 'solid'
                        }
                    },
                itemStyle: {//图形样式
                    borderColor: '#fff',//图形的描边颜色
                    borderWidth: 1//图形描边宽度
                    },
                emphasis: {//高亮的标签和图形样式
                    label: {
                        fontSize: 20//当鼠标悬停在漏斗某部分上，重点突出文字大小
                    }
                },
                data: {{ funnelData | safe }}
             }
         ]
    };


option && myChart.setOption(option);
</script>
</body>
</html>